<template>
  <div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="20%">
      <div>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
           <el-form-item label="新密码" prop="password1">
              <el-input show-password  v-model="form.password1"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password2">
               <el-input show-password  v-model="form.password2"></el-input>
            </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePwd" :disabled="!dialogVisible">确 定</el-button>
      </span>
    </el-dialog>





    <el-container style="100vh">
      <el-header style="height: 4.9rem;">
        <el-row style="border-bottom: solid 1px #e6e6e6; height: 4.9rem;">

          <el-col :span="6" style="vertical-align: sub">
            <div>
              <p style="  font-weight:400;margin-left: 2.5rem;margin-top: 1.4rem;" ><el-link style="font-size: 1.4rem;"  href="/#/show"  :underline="false">VUE成绩管理系统</el-link><el-button size="small"  type="success" @click="guanbi()"
                  :icon="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" style="margin-left: 0.625rem;margin-bottom: 2.25rem;border-radius:15%;" plain circle>
                </el-button>
              </p>
            </div>
          </el-col>
          <el-col :span="6">
            <div>&nbsp</div>
          </el-col>
          <el-col :span="10">
            <div>&nbsp</div>
          </el-col>
          <el-col :span="2" >
            <div style="height: 4.9rem;">
              <el-dropdown style="margin-top: 1.8rem;" @command="handleCommand">
                <span class="el-dropdown-link" style="font-size: 0.95rem;">
                 欢迎你：{{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="pwd"><i class="el-icon-edit"></i> 修改密码</el-dropdown-item>
                  <el-dropdown-item command="logout"><i class="el-icon-s-home"></i> 安全退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container style="height: calc(100vh - 78px);">
        <el-aside width="" style="height:100%;">
          <el-menu :default-active="path"  ref="aaa" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            :collapse="isCollapse" style="height: 100%;" unique-opened @select="setVal"  router>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-document-copy"></i>
                <span>成绩管理</span>
              </template>
              <el-menu-item-group v-if="role==='ROLE_TEACHER'||role==='ROLE_ADMIN'">
                <el-menu-item index="/classGrade">班级成绩录入</el-menu-item>
                <el-menu-item index="/personGrade">个人成绩录入</el-menu-item>
                <el-menu-item index="/allGrade">班级成绩查询</el-menu-item>
              </el-menu-item-group>
			  <el-menu-item-group v-if="role==='ROLE_STUDENT'">
			    <el-menu-item index="/stuClassGrade">个人成绩查询</el-menu-item>
			    <el-menu-item index="/stuAllGrade">班级成绩查询</el-menu-item>
			  </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2" v-if="role==='ROLE_ADMIN'">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/course">课程管理</el-menu-item>
                <el-menu-item index="/tbClass">班级管理</el-menu-item>
                <el-menu-item index="/student">学生管理</el-menu-item>
                <el-menu-item index="/teacher">教师管理</el-menu-item>
                <el-menu-item index="/test2">部门管理</el-menu-item>
              </el-menu-item-group>

            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main >
            <el-row>
               <router-view></router-view>
            </el-row>

          </el-main>
          <el-footer style="border-top: solid 1px #e6e6e6; height: 4.9rem;height: 4.5rem;text-align: center;"><span style="margin-top:1.4rem;display: block;font-size: 0.85rem;color: #606266;">2019级软件三班-孙泽鑫韬</span></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
   import {mapMutations} from 'vuex'
  export default {
    data() {

      var validatePass2 = (rule, value, callback) => {
           if (value === '') {
              callback(new Error('请再次输入密码'))
            } else if (value !== this.form.password1) {
              callback(new Error('两次输入密码不一致!'))
            } else {
              callback()
            }
          }
      return {
        form:{},
        rules:{
          password1: [{ required: true, message: '请输入密码', trigger: 'change' }],
          password2: [{ required: true, validator: validatePass2, trigger:'change' }],

        },
        dialogVisible:false,
        isCollapse: false,
        bread:'',
        username:'',
		role:'',
      }
    },
    methods: {
      ...mapMutations(['logout']),
      updatePwd(){
       this.$refs.ruleForm.validate(valid=>{
         if(valid){
        this.$ajax.post("pwd/save",this.form).then(res=>{
            var result=res.data;
            if(result.success){
              this.logout();
              this.$router.replace('/');
               this.$notify.success({
                   title: '提示',
                   message: '密码修改成功',
                   position: 'bottom-right',
               });
            }
            this.dialogVisible = false
        }).catch(res=>{})
          }
       })
      },
      handleOpen(key, keyPath) {

      },
      handleClose(key, keyPath) {

      },
      setVal(val){
         window.sessionStorage.setItem("path",val);
      }
      ,
      guanbi() {
        this.isCollapse = !this.isCollapse;
      },
      table(){
        this.bread='表格'
        this.$router.push('/table')
      },
      handleCommand(command) {
          if(command==='logout'){
            this.logout();
            this.$router.replace('/');
            this.$notify.info({
                title: '提示',
                message: '注销成功',
                position: 'bottom-right'
            });
          }
          if(command==='pwd'){
            this.form={};
            this.dialogVisible=true;
          }
      }

    },
    computed:{
      path(){
        var path = window.sessionStorage.getItem("path");
          if(this.role==='ROLE_STUDENT'){
            if(path){
              return path
            }else{
              return '/stuClassGrade'
            }
          }else{
            if(path){
              return path
            }else{
              return '/classGrade'
            }
          }
      },

    }
    ,
    created() {

      this.username= window.sessionStorage.getItem("name");
	  this.role=window.sessionStorage.getItem("role")
    }

  }
</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100%;
  }
</style>
